<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<!-- JavaScript 能够改变 HTML 内容 -->

<body>

    <h2>JavaScript 能做什么?</h2>


    <!-- 1、JavaScript 能够改变 HTML 内容。 -->
    <p>1、JavaScript 能够改变 HTML 内容。</p>

    <p id="i1">Hello World!</p>

    <button type="button" onclick='document.getElementById("i1").innerHTML = "Hello JavaScript!"'>
        点击我！
    </button>


    <!-- 2、JavaScript 能够改变 HTML 属性值。 -->
    <p style="margin-top: 50px;">2、JavaScript 能够改变 HTML 属性值。</p>

    <button onclick="document.getElementById('i2').src = 'images/eg_bulbon.gif'">开灯</button>

    <img id="i2" src="images/eg_bulboff.gif" style="text-align:center;">

    <button onclick="document.getElementById('i2').src = 'images/eg_bulboff.gif'">关灯</button>


    <!-- 3、JavaScript 能够改变 HTML 元素的样式。 -->
    <p style="margin-top: 50px;">3、JavaScript 能够改变 HTML 元素的样式。</p>

    <p id="i3">Hello JavaScript！!</p>

    <button type="button" onclick="document.getElementById('i3').style.fontSize='35px'">点击我!</button>


    <!-- 4、JavaScript 能够隐藏 HTML 元素。 -->
    <p style="margin-top: 50px;">4、JavaScript 能够隐藏 HTML 元素。</p>

    <p id="i4">Hello JavaScript！!</p>

    <button type="button" onclick="document.getElementById('i4').style.display='none'">点击我!</button>


    <!-- 5、JavaScript 能够显示隐藏的 HTML 元素-->
    <p style="margin-top: 50px;">5、JavaScript 能够显示隐藏的 HTML 元素</p>

    <p id="i5" style="display: none;">Hello JavaScript！</p>

    <button type="button" onclick="document.getElementById('i5').style.display='block'">点击我!</button>


</body>

</html>